<!-- html -->
<template>
  <h2 class="h2">watchEffect，自动监视ref</h2>
  <span class="span2">num：</span>
  <input class="input1" type="number" v-model="num">
  <button class="button1" @click="changeNum">修改num</button>
  <hr class="hr1">
  <span class="span2">num1：</span>
  <input class="input1" type="number" v-model="nums.num1">
  <span class="span2">num2：</span>
  <input class="input1" type="number" v-model="nums.num2">
  <span class="span2">num3：</span>
  <input class="input1" type="number" v-model="nums.num3">
  <button class="button1" @click="changeNum1">修改num1</button>
  <button class="button1" @click="changeNum2">修改num2</button>
  <button class="button1" @click="changeNum3">修改num3</button>
  <button class="button1" @click="changeNums">修改nums</button>
</template>

<!-- js或ts -->
<script lang="ts">
export default {
  name: 'watchEffectRefTest1'
}
</script>

<!-- js或ts -->
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
//数据
let num = ref(1)
let nums = ref({ num1: 1, num2: 1, num3: 1 })
//方法
function changeNum() {
  num.value += 1
}
function changeNum1() {
  nums.value.num1 += 1
}
function changeNum2() {
  nums.value.num2 += 1
}
function changeNum3() {
  nums.value.num3 += 1
}
function changeNums() {
  nums.value = { num1: 11, num2: 22, num3: 33 }
}
//自动监视ref基本类型，开启默认执行
let stopWatchEffect = watchEffect(() => {
  console.log('num变化，新值为：', num)
  if (num.value == 10) {
    console.log('停止监视')
    //停止监视
    stopWatchEffect()
  }
})
//无法自动监视ref对象类型
watchEffect(() => {
  console.log('nums变化，新值为：', nums)
})
//自动监视ref对象类型内部属性，开启默认执行
watchEffect(() => {
  console.log('num1变化，新值为：', nums.value.num1)
})
//自动监视多个ref类型，开启默认执行
watchEffect(() => {
  console.log('多个内容变化，num2变化，新值为：', nums.value.num2, '，num3变化，新值为：', nums.value.num3)
})
</script>

<!-- 样式 -->
<style scoped></style>